<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

 
    
    <link rel="stylesheet" type="text/css" href="easyui1.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css">
    <script src="easyui1.5/jquery.min.js"></script>
    <script src="easyui1.5/jquery.easyui.min.js"></script>
	<script src="paggingCoreV3r44.js"></script>
</head>

<body>

<!-- 数据显示区区域-->
<div style="display:nonexx" id="datalist_div">

-----------

</div>
<!-- 数据显示区区域 end-->


<!-- 翻页控件区域-->

<div class="easyui-panel">
		<div class="easyui-pagination" id="page_div" ></div>
	</div>
   <!--  绑定翻页查询数据事件-->
<script >

function getTestdata()
{
	var a=new Array();
	for(i=1;i<99;i++)
	{
	a.push(i);	
	}
	return a ;
	
}
function  showCurPageData2Table(cur_page_datas)
{
	for(curitem of cur_page_datas)
			{
				
				$("#datalist_div").append(","+curitem);
			}
	
}
var all_data=getTestdata();//获取数据，可以一般是从后台ajax获取。。前段分页是获取所有数据，后端分页只获取当前页数据
//设置翻页
$('#page_div').pagination({
    total:all_data.length,
    pageSize:10,
	onSelectPage: function(pageNumber, pageSize){
   		  $("#datalist_div").html(""); //清空现有显示数据
		  //截取当前页面数据
		  var cur_page_datas=getCurPageDatas(all_data,pageNumber,pageSize);
		  //显示截取数据到界面
		  showCurPageData2Table(cur_page_datas);
			
    }
});
$('#page_div').pagination('select', 1);//转到第一页

</script> 
    
</body>
</html>
